<template>
    <view class="noticeDetail">

        <van-nav-bar custom-class="select-nav-box" title-class="titleclass" :title="noticeTitle" left-arrow>
        </van-nav-bar>
        <van-icon @click="onClickLeft" class="lefticon" size="24px" name="arrow-left" color="white" />
        <view class="content">
            <view v-for="(item, index) in noticeList" :key="index" class="notice-item" @click="handleClick(item)">
                <!-- 左侧内容区 -->
                <view class="notice-left">
                    <view class="notice-title">{{ item.title }}</view>
                    <view class="notice-tag">
                        <!-- 动态绑定标签样式 -->
                        <text :class="['tag-text', `tag-${item.type}`]">
                            {{ item.tag }}
                        </text>
                    </view>
                </view>

                <!-- 右侧状态与时间 -->
                <view class="notice-right">
                    <view class="notice-status" :class="item.status === '未读' ? 'unread' : ''">
                        {{ item.status }}
                    </view>
                    <view class="notice-time">{{ item.time }}</view>
                </view>
            </view>

            <!-- 底部无更多提示 -->
            <!-- <view class="no-more" v-if="noticeList.length > 0">
      没有更多了
    </view> -->
        </view>
    </view>
</template>

<script>

export default {
    props: {
        showLeft: { type: Boolean, default: false },
    },
    data() {
        return {
            noticeTitle: '公告列表',
            noticeList: [
                {
                    title: '提示信息',
                    tag: '提示',
                    type: 'info', // 对应样式类型
                    status: '已读',
                    time: '昨天'
                },
                {
                    title: '重要公告',
                    tag: '重要公告',
                    type: 'important',
                    status: '已读',
                    time: '昨天'
                },
                {
                    title: '紧急公告紧急公告',
                    tag: '紧急公告',
                    type: 'urgent',
                    status: '未读',
                    time: '昨天'
                }
            ]
        }
    },
    methods: {
        getTime(data) {
            return data ? dayjs(new Date().getTime()).format("YYYY-MM-DD HH:mm") : dayjs(data).format("YYYY-MM-DD HH:mm");
            // if (!item.sendTime) return "";
            // return dayjs(item.sendTime).format("YYYY-MM-DD HH:mm");
        },
        handleClick() { },
        onClickLeft() {
            this.$emit('closeList')
        }
    },
}
</script>

<style lang="scss" scoped>
.noticeDetail {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #fff;

    .lefticon {
        position: absolute;
        top: 22rpx;
        left: 12rpx;
        z-index: 99;
    }
}

.content {
    width: 100%;
    padding: 10rpx;
    box-sizing: border-box;
    background-color: #ffffff;
}

.notice-status {
    font-size: 26rpx;
    color: #999999;
}

/* 未读状态样式 */
.unread {
    color: #F56C6C;
    font-weight: 500;
}

/* 时间文字 */
.notice-time {
    font-size: 24rpx;
    color: #BBBBBB;
}

.tag-urgent {
    color: #F56C6C;
    border: 1px solid #FAB6B6;
    background-color: #FFF2F2;
}

/* 右侧状态与时间 */
.notice-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10rpx;
}

.tag-text {
    font-size: 24rpx;
    padding: 4rpx 16rpx;
    border-radius: 6rpx;
    height: 44rpx;
    line-height: 44rpx;
}

/* 不同类型标签样式 */
.tag-info {
    color: #E6A23C;
    border: 1px solid #F8C377;
    background-color: #FFF8E6;
}

.tag-important {
    color: #4096FF;
    border: 1px solid #94BFFF;
    background-color: #ECF5FF;
}

.notice-title {
    font-size: 32rpx;
    color: #1a1a1a;
    line-height: 1.4;
    /* 标题过长时省略 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 标签容器 */
.notice-tag {
    height: 44rpx;
    display: flex;
    align-items: center;
}

/* 列表项样式 */
.notice-item {
    position: relative;
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    padding: 24rpx 30rpx;
    border: 1px solid #ccc;
    align-items: center;
    border-radius: 20rpx;
}


/* 左侧内容区 */
.notice-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    padding-right: 20rpx;
    box-sizing: border-box;
}

.notice-detail {
    width: 100%;
    //   min-height: 100vh;
    background-color: #ffffff;
    overflow-x: hidden;
}

::v-deep .select-nav-box {
    padding-top: 0px !important;
    background-color: #4187F6;
}

::v-deep .titleclass {
    color: #fff !important;

}




.content {
    padding: 0 30rpx 30rpx 30rpx;
    box-sizing: border-box;
}

/* 标题样式 */
.notice-title {
    font-size: 36rpx;
    color: #1a1a1a;
    font-weight: 600;
    margin-bottom: 24rpx;
    line-height: 1.4;
}

/* 时间样式 */
.notice-time {
    font-size: 28rpx;
    padding-top: 20rpx;
}

/* 正文内容样式 */
.notice-content {
    font-size: 32rpx;
    color: #333333;
    line-height: 1.8;
    /* 增加行高，提升可读性 */
    letter-spacing: 1rpx;
}
</style>